import styled from 'styled-components'
export const HYRankingContent = styled.div`
    width: 230px;
    .rank-top{
        display:flex;
        align-items:center;
        padding: 20px 0 0 19px;
        .rank-img{
            width:80px;
            height: 80px;
            margin-right:20px;
        }
        .list{
            .player{
            display:inline-block;
            margin-top:5px;
            margin-right:5px;
            background:url(${require('@/assets/img/sprite_02.png').default});
            width:22px;
            height: 22px;
            background-position: -267px -205px;

        }
        .loading{
            display:inline-block;
            margin-top:5px;
            background:url(${require('@/assets/img/sprite_02.png').default});
            width:22px;
            height: 22px;
            background-position: -300px -205px;
        }
        }
        
    }
    .list {
        margin-top:19px;
        .list-item {
        display: flex;
        align-items:center;
        height: 32px;

        :nth-child(-n+3) .rank {
            color: #c10d0c;
        }

        .rank {
            width: 35px;
            text-align: center;
            margin-left: 10px;
            font-size: 16px;
        }

        .info {
            color: #000;
            width: 170px;
            height: 17px;
            display: flex;
            justify-content: space-between;

            .name {
            flex: 1;
            }

            .operate {
            display: none;
            width: 82px;

            .btn {
                //button是行内块
                width: 17px;
                height: 17px;
                margin-left: 8px;
                cursor: pointer;
            }

            .play {
                background-position: -267px -268px;
            }

            .addto {
                position: relative;
                top: 2px;
                background-position: 0 -700px;
            }

            .favor {
                background-position: -297px -268px;
            }
            }
        }

        

        &:hover {
            .operate {
            display: block;
            }
        }
        }
  }

  .footer {
    height: 32px;
    display: flex;
    align-items: center;
    margin-right: 32px;
    justify-content: flex-end;

    a {
      color: #000;
    }
        }
    
`